<template>
  <div>
      <div>
          <div class="top"><img src="../../../public/007.png" alt=""></div>
          <div class="subsidy">
              <p class="subsidy-text">————  抢补贴 帮你省  ————</p>
              <div class="Coupons">
                  <div class="left">
                      <p class="left-pirce">￥100</p>
                      <p class="left-use">无门槛使用</p>
                  </div>
                  <div class="right">
                      <p>
                          <span class="right-ticket">平台券</span>
                          <span class="right-use">限到店店铺商品使用</span>
                      </p>
                      <p>
                          <span class="right-time">2021.09.01-2021.09.18</span>
                          <button class="right-receive">立即领取</button>
                      </p>
                  </div>
              </div>

              <!-- 心选好店 -->
              <p class="subsidy-text">————  心选好店 限量88元  ————</p>
              <p class="er">
                  <router-link to="/a">心选好店88元抢</router-link>
                  <router-link to="/b">心选好店5折享</router-link>
                  
              </p>
              <router-view></router-view>
              
              
          </div>
      </div>
  </div>
</template>

<script>

export default {
   
}
</script>

<style scoped>
    .top{
        width: 100%;
        display: block;
        font-size: 0;
    }
    .top img{
        width: 100%;
    }

    /* subsidy */
    .subsidy{
        width: 100%;
        background-color: #fe3869;
    }
    .subsidy-text{
        text-align: center;
        font-size: 0.3rem;
        padding: 0.2rem 0;
        font-weight: bold;
    }
    .Coupons{
        width: 6.23rem;
        height: 1.65rem;
        background: url("../../../public/008.png") no-repeat;
        background-size: 100%;
        margin: 0 auto;
        display: flex;
    }
    .left{
        width: 1.77rem;
        height: 1.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: center;
        color: #ffffff;

    }
    .right{
        width: 4.45rem;
        height: 1.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }


    /* left */
    .left-pirce{
        font-size: 00.4rem;
        font-weight: bold;
    }

    /* right */
    .right p{
        display: flex;
        justify-content: space-evenly;
    }
    .right-ticket{
        border: #f43030 0.02rem solid;
        padding: 0 0.2rem;
        color: #f43030;
    }
    .right-use{
        font-weight: bold;
    }
    .right-time{
        line-height: 0.4rem;
        color: #c1c2c3;
    }
    .right-receive{
        background: #f23030;
        color: white;
        border: none;
        padding: 0 0.2rem;
        border-radius: 0.5rem;
    }

    /* 二级路由 */
    .er{
        display: inline-block;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        padding: 0.2rem 0;
        font-size: 00.3rem;
        background-color: #ffffff;
    }
    a{
      color: #000000; 
      font-weight: bold; 
    }
    .router-link-active{
        color: #bc9141;
        border-bottom: #bc9141 solid 0.05rem;
    }
</style>